<template>
    <div class="circle-management-list-view view-container">

        <div class="main-content">
            <div class="list-container">

                <div
                        class="filter-container"
                        style="padding: 0"
                >

                    <el-form
                            :inline="true"
                            :model="formData"
                            label-position="right"
                            label-width="80px"
                            size="small"
                            class="filter-form-inline"
                    >

                        <el-row
                                :gutter="20"
                                style="margin-left: 0px; margin-right: 0px"
                        >

                            <el-col :span="6">
                                <el-form-item
                                        label="素材类型"
                                        style="width: 100%"
                                >
                                    <el-select
                                            v-model="formData.type"
                                            style="width: 100%"
                                            placeholder="请选择素材类型"
                                            clearable
                                            @change="listSearch"
                                    >
                                        <el-option label="科普" value="agent"></el-option>
                                        <el-option label="早安寄语" value="agent_person"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>

                            <el-col :span="7">
                                <el-form-item
                                        label="使用日期"
                                        style="width: 100%"
                                >
                                    <date-range-picker
                                            v-model="formData.date"
                                            clearable
                                            style="width: 100%;"
                                            start-placeholder="开始日期"
                                            end-placeholder="结束日期"
                                    />
                                </el-form-item>
                            </el-col>

                            <el-col :span="6">
                                <el-form-item
                                        label="关键字"
                                        style="width: 100%"
                                >
                                    <el-input v-model="formData.keyWord" placeholder="请输入关键字"/>
                                </el-form-item>
                            </el-col>

                            <el-col :span="5">
                                <el-form-item style="width: 100%">
                                    <el-button
                                            class="border-btn"
                                            @click="reset"
                                    >重置</el-button>
                                    <el-button
                                            type="primary"
                                            class="main-btn"
                                            @click="listSearch"
                                    >搜索</el-button>
                                </el-form-item>
                            </el-col>

                        </el-row>
                    </el-form>

                </div>

                <table-view
                        :data="tableData"
                        @row-click="rowClick"
                >
                    <el-table-column
                            label="素材编号"
                            align="center"
                            prop="no"
                            width="150"
                            show-overflow-tooltip
                    />
                    <el-table-column
                            label="素材名称"
                            align="left"
                            header-align="center"
                            prop="name"
                            min-width="200"
                            show-overflow-tooltip
                    >
                    </el-table-column>
                    <el-table-column
                            label="素材类型"
                            align="center"
                            header-align="center"
                            prop="type"
                            width="150"
                            show-overflow-tooltip
                    />
                    <el-table-column
                            label="使用日期"
                            align="center"
                            prop="productName"
                            width="120"
                            show-overflow-tooltip
                    >
                        <template #default="{row}">
                            {{ dateFormat('yyyy-mm-dd',row.date) }}
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="发布人"
                            align="center"
                            prop="creator"
                            show-overflow-tooltip
                    />
                    <el-table-column
                            label="发布时间"
                            align="center"
                            width="150"
                    >
                        <template #default="{row}">
                            {{ dateFormat('yyyy-mm-dd HH:MM',row.createdAt) }}
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="操作"
                            align="center"
                            min-width="150px"
                    >
                        <template #default="{row}">

                            <el-button
                                    type="text"
                            >批量下载素材</el-button>

                        </template>
                    </el-table-column>
                </table-view>

                <Pagination
                        v-model:page="formData.page"
                        v-model:limit="formData.pageSize"
                        style="display: flex; justify-content: flex-end"
                        :total="total"
                        @pagination="getList"
                />

            </div>
        </div>

        <detail-drawer
                ref="detailDrawer"
                :size-width="1000"
                custom-title
        >
            <template #title>

                <span>朋友圈素材 - {{selectData.no}}</span>

            </template>
            <template #contents>

                <detailsView />

            </template>
        </detail-drawer>

    </div>
</template>

<script>
import {defineAsyncComponent, defineComponent, onMounted, reactive, toRefs} from 'vue'

export default defineComponent({
        name: "index",
        components:{
            detailsView : defineAsyncComponent(
                () => import('../../modules/detailsView.vue')
            )
        },
        setup(){
            var data = reactive({
                formData:{
                    page:1,
                    pageSize:20,
                    type:'',
                    keyWord:'',
                    date:''
                },
                tableData:[
                    {
                        createdAt:'2020-05-11 05:36:46',
                        creator:'admin',
                        status:'草稿',
                        date:'2020-05-21 11:00:00',
                        type:'早安寄语',
                        name:'0420早安寄语',
                        no:'TY-0945'
                    },
                    {
                        createdAt:'2020-02-16 05:36:46',
                        creator:'admin',
                        status:'已发布',
                        date:'2020-05-21 11:00:00',
                        type:'科普',
                        name:'01科普',
                        no:'TY-1145'
                    },
                    {
                        createdAt:'2019-10-01 11:24:16',
                        creator:'admin',
                        status:'已发布',
                        date:'2020-05-21 11:00:00',
                        type:'早安寄语',
                        name:'0150早安寄语',
                        no:'TY-4545'
                    }
                ],
                total:0,
                detailDrawer:null,
                selectData:{}
            })

            const reset = () => {

            }

            const listSearch = () => {

            }

            const getData = () => {

            }

            const rowClick = (row) => {
                data.selectData = row
                data.detailDrawer.open()
            }

            onMounted(() => {
                getData()
            })

            return{
                ...toRefs(data),

                rowClick,
                reset,
                listSearch,
                getData,
            }
        }
    })
</script>

<style scoped>

</style>
